<template>
  <div style="height: 500px">
	  <pie height="100%" width="100%" :series="[{ value: numFemale, name: 'Female' },{ value: numMale, name: 'Male' }]"></pie>
  </div>
</template>
<script>
import pie from '@/components/Charts/Pie'
import { getList } from '@/api/student'
	
export default {
  name: 'Pie',
  components: { pie },
  data() {
	  return {
	    numFemale: undefined,
		numMale: undefined,
		list:[],
		listQuery:{
		  page:1,
		  limit:200,
		  name:undefined
		}
	  }
	},
  created() {
	  this.fetchData()
  },
	methods: {
		fetchData() {
			getList(this.listQuery).then((response=>{
				this.list = response.data.items
				const mList = this.list.filter(item => {
					return item.gender ==="M"
				})
				this.numMale = mList.length
				this.numFemale =this.list.length - this.numMale
			}))
			// getGenderInfo().then((response) => {
			// 	this.numFemale = response.data.numFemale
			// 	this.numMale = response.data.numMale
			// })
		}
	}
}
</script>

<style scoped>
	
</style>